<!--
 * @Author: your name
 * @Date: 2021-11-11 10:18:55
 * @LastEditTime: 2021-11-11 11:22:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \算法测试\day0906\楼栋问题.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            height: 25px;
        }
    </style>
</head>
<body>
        <table border="1px solid black" class="t1" style="float: left;">
            <tr>
                <th>楼栋ID</th>
                <th>楼栋数据</th>
            </tr>
            <tr>
                <td>第一栋</td>
                <td>芜湖~</td>
            </tr>
            <tr id="2">
                <td>第二栋</td>
                <td>芜湖~</td>
            </tr>
        </table>

        <table border="1px solid black" class="t2">
            <tr>
                <th>楼层编号</th>
                <th>楼层数据</th>
            </tr>
        </table>
    <script>
        let loucen = [ //第一栋的楼层数据
            {
                ID: '1-1',
                name: '蒋鹏',
                tet: '吃饭了嘛'
            },
            {
                ID: '1-2',
                name: '刘晶晶',
                tet: '吃了'
            },
            {
                ID: '1-3',
                name: '蒋鹏',
                tet: '没吃饭'
            },
        ]
        let t1=document.getElementsByClassName("t1")[0];
        let t2=document.getElementsByClassName("t2")[0];
        //循环条数往右边表格渲染（这里我没有框架所以操纵节点放 你如果有框架应该是把数据丢进去就会自动渲染的 就像antd的表格）
        for (let i = 0; i < loucen.length; i++) {//循环数据条数（楼层数）
            let tr = document.createElement("tr");//创建出这一个楼层的tr
            for (const key in loucen[i]) {//循环当前楼层的数据
                let td = document.createElement("td");//根据这个楼层的数据个数创建对应数量的td
                td.innerHTML=loucen[i][key];//显示数据
                tr.appendChild(td)//放进这一层的tr里面
            }
            t2.appendChild(tr)//把这一层的数据放进楼层表格
        }

        //渲染左边的表格
        for (let i = 1; i < loucen.length; i++) {//循环数据条数（楼层数）因为是n-1 所以是1开头
            let tr = document.createElement("tr");//创建出这一个楼层的tr
            for(let j=0;j<2;j++){//这里的2表示你左边有几个td 自己根据实际情况改
                let td = document.createElement("td");
                tr.appendChild(td);
            }
            let nownode=document.getElementById("2");//这里获取的是你下一个楼栋的节点 因为你要插在他前面 这里我是ID 你就记得在渲染当前楼栋的时候用当前楼层的id+1
            t1.children[0].insertBefore(tr,nownode);//把刚刚创建的空tr放进去 这里.children[0]是因为table下的子节点还有一个tbody 即便你没有写tbody也默认有
            //不点出来会报错
        }

        /*
            记得要设置td的高度一致  不然空数据撑不开 两个表格的td保持一致就行了 这样不管怎么渲染 两边的表格都是一样高的
            这种解决简直就是没有办法的办法 还是组件结构的问题 我再想想有没有更好的办法 你先用到这个
        */
    </script>
</body>

</html>